<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('个人中心-小邑')"/>
    <style>
        /* 用户信息 */
        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

        .user-info-head:hover:after {
            content: '\e681';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 28px;
            padding-top: 2px;
            font-style: normal;
            font-family: layui-icon;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .user-info-head img {
            width: 110px;
            height: 110px;
        }

        .layui-card {
            margin: 10px;
        }

        .layui-card:last-child {
            margin-bottom: 10px;
        }

        .layui-card-header {
            border-bottom: 1px solid #e6e6e6;
        }

        .layui-fluid {
            padding: 15px;
        }

        .layui-fluid-btn {
            padding-bottom: 75px;
        }

        #formAdvForm .layui-form-item {
            margin-bottom: 5px;
        }

        #formAdvForm .layui-form-item .layui-inline {
            margin-bottom: 25px;
            margin-right: 0;
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<th:block th:replace="common/head::loginJs"/>
<body marginwidth="0" marginheight="0">
<!-- 正文开始 -->
<form class="layui-form" action=""  id="formAdvForm" lay-filter="formAdvForm">
    <div class="layui-fluid layui-fluid-btn">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row layui-col-space10" style="height: 210px">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <div class="text-center layui-text">
                                    <div class="user-info-head" id="userInfoHead">
                                        <img th:src="@{/static/admin/img/login/headImg.jpg}" >
                                    </div>
                                    <h2 style="padding-top: 5px;">Serati Ma</h2>
                                    <p style="padding-top: 3px;">海纳百川，有容乃大</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">基本信息</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <input name="id" type="text" style="display: none">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">用户名</label>
                                <div class="layui-input-block" >
                                    <input type="text" name="username" id="username" lay-verify="required"
                                           placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">生日</label>
                                <div class="layui-input-block" >
                                    <input type="text" name="birthday" id="birthday" lay-verify="required" readonly
                                           placeholder="请输入生日" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">性别</label>
                                <div class="layui-input-block" id="sex">

                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">邮箱</label>
                                <div class="layui-input-block" >
                                    <input type="text" name="email" id="email" lay-verify="email" placeholder="请输入邮箱"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">账号</label>
                                <div class="layui-input-block" >
                                    <input type="text" name="account" id="account" lay-verify="required" placeholder="请输入账号"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-form-required">手机号</label>
                                <div class="layui-input-block" >
                                    <input type="number" name="phone" id="phone" lay-verify="phone" placeholder="请输入手机号"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label ">个人简介</label>
                                <div class="layui-input-block" >
                                    <textarea type="text" name="personalProfile" id="personalProfile"style="height: 38px;min-height: 38px"  placeholder="请输入个人简介"autocomplete="off" class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group-bottom">
        <button type="button" id="formBtn" class="xy-btn xy-btn-primary subCheckBtn" lay-submit="" lay-filter="formBtn">
            更新
        </button>
        <button type="button"onclick="closeLayerIndex()" class="xy-btn ">
            取消
        </button>
    </div>
</form>
<script>
    layui.use(['layer', 'jquery', 'form', 'formX', 'laydate', 'notice', 'xmSelect', 'upload'], function () {
            var $ = layui.jquery
                , form = layui.form
                , formX = layui.formX
                , xmSelect = layui.xmSelect
                , laydate = layui.laydate
                , notice = layui.notice
                , upload = layui.upload
                , layer = layui.layer;

        upload.render({
            elem: '#userInfoHead'
            , url: ""
            , accept: 'images' //图片格式
            , exts:"jpg|png|jpeg"//允许上传的文件后缀
            , auto : false //是否选完文件后自动上传
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    layui.$('#userInfoHead img').attr('src', result);
                });
            }
            //操作成功的回调
            ,done: function (res, index, upload) {
            }
            //上传错误回调
            ,error: function (index, upload) {
                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
            }
        });
        /*生日*/
        laydate.render({
            elem: '#birthday',
            theme: '#393D49'
        });
        /*性别下拉*/
        var sex = xmSelect.render({
            el: '#sex',
            layVerify: 'required',
            layVerType: 'msg',
            initValue:[user.sex],
            tips: "性别",
            radio: true,
            clickClose: true,
            theme: {
                color: '#8799a3',
            },
            model: {
                icon: "hidden",
            },
            data: [
                {name: "男", value: "男"},
                {name: "女", value: "女"}
            ],
            on: function (data) {
            },
        });
        /* 监听表单提交 */
        form.on('submit(formBtn)', function (data) {
            var form = document.getElementById("formAdvForm");
            var formData = new FormData(form);
            formData.append("sex",sex.getValue("nameStr"));
            var loadIndex = null;
            checkSubBtn(1);
            sendAjaxPostFileToCallback(
                basePath + '/user/editUser',
                formData,
                function (result){
                    if (result.success){
                        // 提示信息
                        top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                        sendAjaxPostToError(
                            basePath+"/logout",
                            "",
                            function (result){
                                if (result.code == 200){
                                    window.location = 'login';
                                }else {
                                    top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                                }
                            },
                            function (data) {
                                if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                    top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                                }else{
                                    top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                                }
                            }
                        )
                    }else{
                        checkSubBtn(2);
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    checkSubBtn(2);
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2});
                    }
                },
                function (){
                    loadIndex = layer.load(1);
                },
                function (){
                    layer.close(loadIndex);
                },
            )
            return false;
        });

        layui.form.val('formAdvForm', user);
        if (utils.string.isEmpty(user.headImg)){
            layui.$('#userInfoHead img').attr('src', fjHttp+user.headImg);
        }
    });
</script>
</body>
</html>